import { WindowComp, WindowSideMenu } from "@/components"
import { useLocale } from "@/utils/hooks"
import { Box, Image } from "magic-ui-react"
import { useState } from "react"
import { settingsName, settingsContent } from "./cons"
import styles from './style.module.less'

const SystemSetting = () => {
  const locale = useLocale()
  const [activeSetting, setActiveSetting] = useState(settingsName[0])
  const content = (
    <div className={styles.systemSettingComp}>
      <WindowSideMenu
        options={settingsName}
        onChange={(active) => {
          setActiveSetting(active as any)
        }}
      />
      <main className={styles.settingContent}>
        {settingsContent[activeSetting]}
      </main>
    </div>
  )

  return (
    <WindowComp
      title={`${locale('global.setting')} - ${locale(`global.${activeSetting}`)}`}
      iconImage={'icons/settings.png'}
      content={content}
    />
  )
}

export default SystemSetting